<template>
	<scroll-view scroll-y="true" @refresherrefresh='refresherrefresh'>
		<view class="address-page">
			<navBar :title="t('address.addressManger')"></navBar>
			<scroll-view scroll-y class="address-list" :style="{ height: scrollHeight + 'px' }">
				<view class="address-item" v-for="(address, index) in addresses" :key="index" v-if="addresses.length>0"
					@click="editAddress(address)">
					<view class="address-content">
						<view class="address-header">
							<text class="address-title over3">{{ address.company }}</text>
							<tn-icon class="edit-icon iconfont" @tap="editAddress(address)" name='edit'></tn-icon>
						</view>

						<view class="contact-info">
							<text class="contact-name">{{ address.name }}</text>
							<text class="contact-phone">{{ address.phone }}</text>
						</view>

						<view class="tags" v-if="address.isDefault">
							{{t('address.Default')}}

						</view>
					</view>
				</view>
				<view class="noData" v-else>
					<img src="../../static/address/Frame.png" alt="" />
					<div class="noData_text">{{t('address.noData')}}</div>
				</view>
			</scroll-view>

			<view class="bottom-button">
				<button class="add-address-btn" @tap="addNewAddress">
					{{t('address.newAddress')}}

				</button>
			</view>
		</view>
	</scroll-view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	import navBar from "../../components/navBar/index.vue"
	import {
		useI18n
	} from 'vue-i18n'

	const {
		t
	} = useI18n()
	interface Address {
		id : string
		company : string
		name : string
		phone : string
		isDefault : boolean
	}

	const statusBarHeight = ref(0)
	const scrollHeight = ref(0)

	const addresses = ref<Address[]>([
		{
			id: '1',
			company: 'Jiangning District Nantong Xinhua Construction Group Co., Ltd. (Zhongyuan North Road East)Jiangning District Nantong Xinhua Construction Group Co., Ltd. (Zhongyuan North Road East)',
			name: 'ZHANG',
			phone: '19988887777',
			isDefault: true
		},
		{
			id: '2',
			company: 'Jiangning District Nantong Xinhua Construction Group Co., Ltd. (Zhongyuan North Road East)',
			name: 'ZHANG',
			phone: '19988887777',
			isDefault: false
		}
	])
	const refresherrefresh = () => {
		console.log('滚动');
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		});
		uni.showModal({
			title: "滚动"
		})
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	}
	const goBack = () => {
		uni.navigateBack()
	}

	const editAddress = (address : Address) => {
		uni.navigateTo({
			url: `/pages/addressForm/addressForm?id=${address.id}`
		})
	}

	const addNewAddress = () => {
		uni.navigateTo({
			url: '/pages/addressForm/addressForm'
		})
	}

	onMounted(() => {
		const systemInfo = uni.getSystemInfoSync()
		statusBarHeight.value = systemInfo.statusBarHeight
		// Calculate scroll height (screen height - nav height - bottom button height)
		scrollHeight.value = systemInfo.windowHeight - (statusBarHeight.value + 44) - 90
	})
</script>

<style lang="scss">
	.address-page {
		min-height: 100vh;
		background-color: #F5F5F5;
	}

	.address-list {}

	.address-item {
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		overflow: hidden;

		.address-content {
			padding: 16px;
		}

		.address-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 12px;

			.address-title {
				flex: 1;
				line-height: 1.4;
				color: #333;
				margin-right: 12px;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 33rpx;
			}

			.edit-icon {
				font-size: 20px;
				color: #999;
				padding: 4px;
			}
		}

		.contact-info {
			display: flex;
			align-items: center;
			gap: 12px;
			margin-bottom: 12px;

			.contact-name,
			.contact-phone {
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 28rpx;
			}
		}

		.tags {
			width: 176rpx;
			height: 52rpx;
			background: rgba(253, 45, 85, 0.2);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			text-align: center;
			line-height: 52rpx;
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #FD2D55;
		}
	}

	.bottom-button {
		position: fixed;
		bottom: 32rpx;
		left: 0;
		right: 0;
		padding: 16px;

		.add-address-btn {
			background-color: #FF4D67;
			color: #FFFFFF;
			height: 80rpx;
			line-height: 48px;
			border-radius: 16rpx;
			font-size: 16px;
			border: none;
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 80rpx;

			&:active {
				opacity: 0.9;
			}
		}
	}

	button.add-address-btn::after {
		border: none;
	}

	.noData {
		margin: 296rpx 274rpx 0;

		.noData_text {
			width: 252rpx;
			height: 32rpx;
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FD2D55;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin: auto;
		}
	}
</style>